<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的',
  },
}
</route>
<template>
  <Loyout class="user-page" bgc="#F3F8FE">
    <view class="index-header h-360 flex-row align-center justify-center">
      <image class="headerBox" :src="Header" mode="scaleToFill" />
    </view>
    <view class="link-box">
      <wd-cell-group border>
        <wd-cell v-for="item in linkList" :title="item.title" is-link :to="item.url" :key="item.title" />
      </wd-cell-group>
      <view class="btn-content flex">
        <wd-button class="flex1 mt-180 ml-20 mr-20" size="large" @click="loginout">退 出</wd-button>
      </view>
    </view>
  </Loyout>
</template>

<script lang="ts" setup>
import Loyout from '@/layouts/index.vue'
import { useUserStore } from '@/store/user'
import Header from '@/static/homeImg/header.png'

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const linkList = ref([
  // {
  //   title: '基础信息',
  //   url: '/pages/user/base',
  // },
  {
    title: '服务器设置',
    url: '/pages/user/server',
  },
  {
    title: '单据设置',
    url: '/pages/user/orderconfig',
  },
])

// 测试 uni API 自动引入
onLoad(() => {
  console.log('Home onLoad')
})

onShow(() => {
  console.log('Home Show')
})

const loginout = () => {
  userStore.setUserInfo({
    ...userInfo.value,
    token: null,
  })
  uni.navigateTo({
    url: '/pages/login/index',
  })
}
</script>

<style lang="scss">
.user-page {
  .index-header {
    background-image: linear-gradient(75deg, rgb(0, 115, 255) 25%, rgb(0, 170, 255) 75%);

  }

  .btn-content {
    width: 100%;
  }

  .headerBox {
    width: 180rpx;
    height: 180rpx;
  }
}
</style>
